<template>
    <div class="w-full h-full ">
        <div class="flex justify-center">
            <div>

        <el-input v-model="text" placeholder="输入感兴趣的项目"></el-input>
    </div>
    <div>
        <el-button type="primary" @click="getSim">确认</el-button>
    </div>
    </div>

        <div class="w-2/3 m-auto grid grid-cols-3 gap-3" v-if="rec.length>0">
            <div v-for="item in rec" class="mt-10" >
                <RestCard @click="goToDetail(item.id)" class="hover:cursor-pointer"
                  :name="item.name" :picUrl="item.picUrl" :foodType="item.foodType" 
                  :location="item.location" />
            </div>
        </div>
    </div>
</template>

<script setup>
import {ref,onMounted} from 'vue'
import axios from 'axios';
import RestCard from "@/components/RestCard.vue";
import {getList} from "@/boot/rest.js";
import {useRouter} from "vue-router";
const router = useRouter()
const text = ref('')
const rec = ref([])
const rest = ref([])
const findRest = (id) => {
  return rest.value.find(item => item.id === id)
}
const goToDetail = (id) => {
  router.push({path: `/detail`,query: {id:id}})
}
const getSim = ()=>{
    axios.get('http://127.0.0.1:5000/sim/'+text.value).then(res=>{
        if(res.data.code ===200){
            res.data.data.forEach(element => {
                let id = +element[0]
                let item = findRest(id)
                rec.value.push(item)
            });
        }
    })
}
onMounted(()=>{
    getList({}).then(res=>{
        if(res.data.code===200){
            rest.value = res.data.data 
        }
    })
})

</script>